<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>事件监听</title>
</head>
<body>
    <div id="app">
        <p>基本的事件传参</p>
        <!-- 事件没传参 可以省略()-->
        <button @click="btnClick">按钮1</button>
        <button @click="btnClick()">按钮2</button>
        <!-- 事件调用方法传参，有参数传参，不给参数的话，方程还是会执行，参数为空，不写参数不写括号，直接传入原生事件 -->
        <button @click="btnClick2(123)">按钮3</button>
        <button @click="btnClick2()"></button>按钮4</button>
        <button @click="btnClick2">按钮5</button>
        <!-- 事件调用时候需要传入本身event还需要传入其他参数 -->
        <button @click="btnClick3($event,123)">按钮6</button>
      </div>
      <div id="app2">
          <p>事件修饰</p>
        <!--1. .stop的使用，btn的click事件不会传播，不会冒泡到上层，调用event.stopPropagation() -->
        <div @click="divClick" style="background-color: brown;">
            <button @click.stop="btnClick">按钮1</button>
        </div>
        <!-- 2. .prevent 调用event.preeventDefault阻止默认行为  -->
        <form action="www.baidu.com">
          <button type="submit" @click.prevent="submitClick">提交</button>
        </form>
        <!--3. 监听键盘的事件 -->
        <input type="text" @click.enter="keyup">
        <!-- 阻止单击事件继续传播 -->

        <!-- 官方 -->
        <a v-on:click.stop="doThis"></a>

        <!-- 提交事件不再重载页面 -->
        <form v-on:submit.prevent="onSubmit"></form>

        <!-- 修饰符可以串联 -->
        <a v-on:click.stop.prevent="doThat"></a>

        <!-- 只有修饰符 -->
        <form v-on:submit.prevent></form>

        <!-- 添加事件监听器时使用事件捕获模式 -->
        <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
        <div v-on:click.capture="doThis">...</div>

        <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
        <!-- 即事件不是从内部元素触发的 -->
        <div v-on:click.self="doThat">...</div>
        <!-- 
        使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
        因此，用 v-on:click.prevent.self 会阻止所有的点击，
        而 v-on:click.self.prevent 只会阻止对元素自身的点击
         -->
      </div>
</body>
<script>
const app = new Vue({
      el:"#app",
      methods:{
        btnClick(){
          console.log("点击");
        },
        btnClick2(value){
          console.log("inputValue : "+value);
        },
        btnClick3(event,value){
          console.log("event : "+event+";inputValue ："+value);
        }
      }
    })
const app2 = new Vue({
    el:"#app2",
    methods:{
    btnClick(){
        console.log("点击button");
    },
    divClick(){
        console.log("点击div");
    },
    submitClick(){
        console.log("提交被阻止了")
    },
    keyup(){
        console.log("keyup点击")
    }
    }
})
</script>
</html> 